<template>
  <div class="menuTab">
    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal">
      <el-menu-item index="1" @click="changeActive('1')">歌曲列表</el-menu-item>
      <!-- <el-menu-item index="2" @click="changeActive('2')"
        >评论({{ commentCount }})</el-menu-item
      > -->
    </el-menu>
  </div>
</template>

<script>
export default {
  name: "menuTab",
  components: {},
  props: {
    // 评论总数
    commentCount: Number,
  },
  data() {
    return {
      // 高亮菜单
      activeIndex: "1",
    };
  },
  methods: {
    changeActive(index) {
      this.activeIndex = index;
      this.$emit("changeActive", index);
    },
  },
};
</script>

<style lang='less' scoped>
/* 点击出来的下划线进行修改 */
.menuTab{
  padding: 0 5.25rem;
  margin: 20px 0;
}

.el-menu-demo {
  // width: 100%;
  border-radius: 5px;
  width: 220px;
  display: flex;
  justify-content: space-evenly;
  /deep/.el-menu-item {
    flex: 1;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 10px;
    border-bottom: none;
    border-radius: 5px;
    color: rgb(83, 81, 81);
    font-size: 17px;
    font-weight: 600;
  }
  /deep/.el-menu-item:hover {
    background-color: rgba(184, 178, 178, 0.918);
    color: #fff;
  }
  /deep/.el-menu-item:focus,
  /deep/.el-menu-item.is-active {
    border-bottom: none;
    background-color: #F6F6F8;
  }
}

</style>
